﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>jquery-datagrid</title>
		<link id="themecss" rel="stylesheet" type="text/css" media="all" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
		
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css" type="text/css" media="all" />
		<style>	body {font-size: 80%;margin:0px;}</style>
		<!-- Example resources -->
		<link rel="stylesheet" href="example/example.css" type="text/css" media="all" />
		<script src="include/date.format.js" type="text/javascript"></script>
		<script src="example/random-sentences.js" type="text/javascript"></script>
		<script src="example/example.js" type="text/javascript"></script>
	
		
		<!-- Datagrid core -->
		<link rel="stylesheet" href="datagrid/dt-core.css" type="text/css" media="all" />
		<script src="datagrid/datagrid.utils.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.js" type="text/javascript"></script>
		
		<!-- Datagrid plugins -->
		<script src="datagrid/datagrid.edit.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.select.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.search.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.filter.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.reorder.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.sort.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.paging.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.scroll.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.group.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.tree.js" type="text/javascript"></script>
		<script src="datagrid/datagrid.toolbar.js" type="text/javascript"></script>
		
		
		<script>
			var THEMES = [
				{name: 'ui-lightness', title:  'UI Lightness', file: 'http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px'},
				{name: 'ui-darkness', title: 'UI Darkness', file: 'http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Segoe+UI%2C+Arial%2C+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=333333&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=25&borderColorHeader=333333&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=000000&bgTextureContent=05_inset_soft.png&bgImgOpacityContent=25&borderColorContent=666666&fcContent=ffffff&iconColorContent=cccccc&bgColorDefault=555555&bgTextureDefault=02_glass.png&bgImgOpacityDefault=20&borderColorDefault=666666&fcDefault=eeeeee&iconColorDefault=cccccc&bgColorHover=0078a3&bgTextureHover=02_glass.png&bgImgOpacityHover=40&borderColorHover=59b4d4&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=f58400&bgTextureActive=05_inset_soft.png&bgImgOpacityActive=30&borderColorActive=ffaf0f&fcActive=ffffff&iconColorActive=222222&bgColorHighlight=eeeeee&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=80&borderColorHighlight=cccccc&fcHighlight=2e7db2&iconColorHighlight=4b8e0b&bgColorError=ffc73d&bgTextureError=02_glass.png&bgImgOpacityError=40&borderColorError=ffb73d&fcError=111111&iconColorError=a83300&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px'},
				{name: 'smoothness', title: 'Smoothness', file: 'http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px'},
				{name: 'start', title:  'Start', file: 'http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=2191c0&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=75&borderColorHeader=4297d7&fcHeader=eaf5f7&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=06_inset_hard.png&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=0078ae&bgColorDefault=0078ae&bgTextureDefault=02_glass.png&bgImgOpacityDefault=45&borderColorDefault=77d5f7&fcDefault=ffffff&iconColorDefault=e0fdff&bgColorHover=79c9ec&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=448dae&fcHover=026890&iconColorHover=056b93&bgColorActive=6eac2c&bgTextureActive=12_gloss_wave.png&bgImgOpacityActive=50&borderColorActive=acdd4a&fcActive=ffffff&iconColorActive=f5e175&bgColorHighlight=f8da4e&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcd113&fcHighlight=915608&iconColorHighlight=f7a50d&bgColorError=e14f1c&bgTextureError=12_gloss_wave.png&bgImgOpacityError=45&borderColorError=cd0a0a&fcError=ffffff&iconColorError=fcd113&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=75&opacityOverlay=30&bgColorShadow=999999&bgTextureShadow=01_flat.png&bgImgOpacityShadow=55&opacityShadow=45&thicknessShadow=0px&offsetTopShadow=5px&offsetLeftShadow=5px&cornerRadiusShadow=5px'},
				{name: 'darkhive', title: 'Dark Hive', file: 'http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Verdana%2C+Arial%2C+sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=444444&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=44&borderColorHeader=333333&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=000000&bgTextureContent=14_loop.png&bgImgOpacityContent=25&borderColorContent=555555&fcContent=ffffff&iconColorContent=cccccc&bgColorDefault=222222&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=35&borderColorDefault=444444&fcDefault=eeeeee&iconColorDefault=cccccc&bgColorHover=003147&bgTextureHover=03_highlight_soft.png&bgImgOpacityHover=33&borderColorHover=0b93d5&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=0972a5&bgTextureActive=04_highlight_hard.png&bgImgOpacityActive=20&borderColorActive=26b3f7&fcActive=ffffff&iconColorActive=222222&bgColorHighlight=eeeeee&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=80&borderColorHighlight=cccccc&fcHighlight=2e7db2&iconColorHighlight=4b8e0b&bgColorError=ffc73d&bgTextureError=02_glass.png&bgImgOpacityError=40&borderColorError=ffb73d&fcError=111111&iconColorError=a83300&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px'}
			];
			
			var COLS = [
				{description: "&nbsp;", field: "checked",sortable:true, renderer: new CheckboxRenderer()},
				{description: "ID", field: "id", sortable:true, sorted: 'asc', filterable:true},
				{description: "Group", field: "group"},
				{description: "Parent", field: "parent"},
				{description: "Name", field: "description", sortable:true,filterable:true},
				{description: "Start date", field: "from", sortable:true, renderer: new DateRenderer("dd/mm/yyyy"), editor: new DateInputEditor()},
				{description: "End date", field: "to", sortable:true, renderer: new DateRenderer("dd/mm/yyyy"), editor: new DateInputEditor()},
				{description: "Effort", field: "effort", sortable:true, filterable:true, editor: new DefaultInputEditor()},
				{description: "Duration", field: "duration", sortable:true,  filterable:true, editor: new DefaultInputEditor()},
				{description: "Resource Name", field: "resource",sortable:true, editor: new DefaultInputEditor()}
			];
			
			function oneOf(arr) {
				return arr[Math.floor(Math.random() * arr.length)];
			}
			//see SampleLoader in example.js
			function generateRecord(i, size) {
				var today = new Date();
				var from = new Date(new Date().setDate(today.getDate() - Math.floor(Math.random() * 100)));
				var to = new Date(new Date().setDate(today.getDate() + Math.floor(Math.random() * 100)));
				
				return {
					"checked": Math.random() > 0.5,
					"id": i, 
					"group": oneOf(['Group 1', 'Group 2', 'Group 3']),
					"parent": Math.floor(Math.random() * i) - 1,
					"description": "Task " + i, 
					"effort": Math.floor(Math.random() * 100), 
					"duration": Math.floor(Math.random() * 100), 
					"resource": oneOf(SENTENCES),
					from: from, 
					to: to
				};
			}
			
			var dt = null;
			
			function start() {
				window.plugins = new Map();
				window.query = new Query('#');

				new Themes(THEMES, $('#themes'));
				
				$( "#tabs" ).tabs();
				$('button').button();
				
				dt = new DataTable(new SampleLoader($('#records').val(), generateRecord), {columns: COLS});
				
				if (window.query.get('plugins') != null) {
					//alert(window.query.get('plugins'));
					var pluginList = window.query.get('plugins').split(',');
					
					$(pluginList).each(function(i, ref) {
						var config = window.query.get(ref) ? JSON.parse(window.query.get(ref)) : null;
						togglePlugin(ref, true, config);
					});
				}
				
				$('#showtitle').attr('checked', dt.plugins.contains('title'));
				$('#search').attr('checked', dt.plugins.contains('search'));
				$('#filter').attr('checked', dt.plugins.contains('filter'));
				$('#sort').attr('checked', dt.plugins.contains('sort'));
				$('#oddeven').attr('checked', dt.plugins.contains('oddeven'));
				$('#celledit').attr('checked', dt.plugins.contains('celledit'));
				$('#hover').attr('checked', dt.plugins.contains('hover'));
				$('#navigate').attr('checked', dt.plugins.contains('navigate'));
				
				var select = (dt.plugins.get('select') == null || dt.plugins.get('select').options == null ? 	'none': dt.plugins.get('select').options.mode),
					view = (dt.plugins.get('view') == null|| dt.plugins.get('view').options == null ? 		'simple': dt.plugins.get('view').options.mode),
					presenter =(dt.plugins.get('presenter') == null || dt.plugins.get('presenter').options == null ? 'none': dt.plugins.get('presenter').options.mode);
				
				$('input[name="selection-mode"][value="' + select +'"]').attr('checked', true);
				$('input[name="view-mode"][value="'+ view +'"]').attr('checked', true);
				$('input[name="presenter-mode"][value="'+ presenter +'"]').attr('checked', true);
				
				dt.attach($('#content'));
				
				
			}
			
			function showFeatures() {
				$( "#features" ).dialog({
					resizable: false,
					width:600,
					modal: true,
					buttons: {
						Close: function() {
							$( this ).dialog( "close" );
						}
					}
				});
			}
		</script>
	</head>
	<body onload="start();">
		<h1 class="ui-widget-header">jquery-datagrid</h1>
			
		<table class="toolbar">
			<tr>
				<td>
					<button onclick="showFeatures()">Show feature list</button>
					<button href="datagrid.js">Download</button>
					<button href="datagrid.js">Download minified version</button>
					<button href="">Download current theme</button>
				</td>
				<td style="text-align:right">Theme: <select id="themes"></select></td>
			</tr>
		</table>
		
		<div style="padding:20px">
			<div id="tabs">
				<ul>
					<li><a href="#tabs-1">General table properties demo</a></li>
					<li><a href="#tabs-2">Simple basic table</a></li>
					<li><a href="#tabs-3">Attach / detach example from markup</a></li>
				</ul>
				<div id="tabs-1">
					<div>
						<table style="border-collapse:collapse;">
							<tr>
								<td style="vertical-align:top">
									<div class="prop-box">
										<table class="props">
											<tr><td><label for="delay">Load delay</label></td><td><input type="text" value="500" size="4" id="delay"/>ms</td></tr>
											<tr><td><label for="records">Records</label></td><td><input type="text" value="200" size="4" id="records" onchange="dt.setLoader(new SampleLoader(this.value));"/></td></tr>
											
											<tr><td><label for="width">Width</label></td><td><input type="checkbox" id="hasTableWidth" onchange="adaptWidth()"/><input type="text" size="3" value="" onchange="adaptWidth()" id="tableWidth"/>px</td></tr>
											<tr><td><label for="height">Height</label></td><td><input type="checkbox" id="hasTableHeight" checked onchange="adaptHeight()"/><input type="text" size="3" value="500" onchange="adaptHeight()" id="tableHeight"/>px</td></tr>
											
											<tr><td>Show</td><td>
												<input type="checkbox" checked onchange="dt.showHeader(this.checked)" id="showheader"/><label for="showheader">Header</label> 
												<input type="checkbox" checked onchange="dt.showFooter(this.checked)" id="showfooter"/><label for="showfooter">Footer</label> 
												
											</td></tr>
											
											<tr><td><label for="title">Title</label></td><td>
												<input type="checkbox" checked onchange="togglePlugin('title', this.checked, {title: $('#title').val()})" id="showtitle"/>
												<input type="input" checked id="title" onchange="dt.setTitle(this.value)" value="This is an example datagrid"/></td></tr>
											
											<tr><td>Toolbar</td><td>
												<input type="checkbox" onchange="togglePlugin('search', this.checked);" id="search"/><label for="search">Search</label>
												<input type="checkbox" onchange="togglePlugin('filter', this.checked);" id="filter"/><label for="filter">Filter</label>
											</td></tr>
											
											<tr><td>Columns</td><td>
												<input onchange="togglePlugin('sort', this.checked);" type="checkbox" id="sort"/><label for="sort">Sorting</label>
												<input type="checkbox" checked id="reordering"/><label for="reordering">Reordering</label>
											</td></tr>
											
											<tr><td>Rows & Cells</td><td>
												<input type="checkbox" checked onchange="togglePlugin('oddeven', this.checked);" id="oddeven"/><label for="oddeven">Odd & Even row highlight</label><br/>
												<input type="checkbox" checked onchange="togglePlugin('hover', this.checked);" id="hover"/><label for="hover">Hover row highlight</label><br/>
												<input type="checkbox" checked onchange="togglePlugin('celledit', this.checked);" id="celledit"/><label for="celledit">Cell Editing</label><br/>
												<input type="checkbox" checked onchange="" id="row-reordering"/><label for="row-reordering">Row drag and drop reordering</label><br/>
												<input type="checkbox" checked onchange="togglePlugin('navigate', this.checked);" id="navigate"/><label for="navigate">Keyboard navigation (arrow keys)</label><br/>
											</td></tr>
											
											<tr><td><label>Row selection</label></td><td>
												<input type="radio" name="selection-mode" id="selection-none" value="none" onchange="togglePlugin('select', true, {mode: 'none'});" /><label for="selection-none">None</label>
												<input type="radio" name="selection-mode" checked id="selection-single" value="single"  onchange="togglePlugin('select', true, {mode: 'single'});" /><label for="selection-single">Single</label>
												<input type="radio" name="selection-mode" id="selection-multiple" value="multiple"  onchange="togglePlugin('select', true, {mode: 'multiple'});" /><label for="selection-multiple">Multiple</label>
											</td></tr>
											
											<tr><td><label>Table style</label></td><td>
												<input type="radio" name="view-mode" checked id="view-none" value="simple" onchange="togglePlugin('view', true, {mode: 'simple'});" /><label for="view-none">None</label>
												<input type="radio" name="view-mode" id="view-group" value="group" onchange="togglePlugin('view', true, {mode: 'group', field: 'group'});" /><label for="view-group">Group</label>
												<input type="radio" name="view-mode" id="view-tree" value="tree" onchange="togglePlugin('view', true, {mode: 'tree', parent: 'parent', id: 'id', collapsed: true});" /><label for="view-tree">Tree</label>
											</td></tr>
											
											<tr><td><label>Paging mode</label></td><td>
												<input type="radio" name="presenter-mode" checked id="presenter-default" value="default" onchange="togglePlugin('presenter', true, {mode: 'none'});"/><label for="presenter-default">None</label>
												<input type="radio" name="presenter-mode" id="presenter-paging" value="paging" onchange="togglePlugin('presenter', true, {mode: 'paging', showScroller:true, showNavigation: true, showPageSizeSelector: true, scrollerSize: 4, pageSize: 20, pageSizes: [10,20,30,50,100,500]});"/><label for="presenter-paging">Paging</label>
												<input type="radio" name="presenter-mode" id="presenter-scroll" value="scroll" onchange="togglePlugin('presenter', true, {mode: 'scroll', pageSize: 20});"/><label for="presenter-scroll">Scrolling</label>
											</td></tr>
										</table>
									</div>
								</td>
								<td style="vertical-align:top;padding:0px 10px 0px 10px;">
									<div id="content"></div>
								</td>
							</tr>
						</table></div>
				</div>
				<div id="tabs-2">
					<script>
						function example2(btn) {
							$(btn).hide();
							var COLS2 = [
								{description: "ID", field: "id", sortable:true, sorted: 'asc', filterable:true},
								{description: "Name", field: "description", sortable:true,filterable:true},
								{description: "Resource Name", field: "resource",sortable:true}
							];
							
							for (var i=0;i<5;i++) {
								var sl = new SampleLoader(10, generateRecord);
								new DataTable(sl, {columns: COLS2}).plugins.add('title', new TableTitleHandler({title: 'Table ' + i})).attach($('#content2'));
								$('#content2').append($('<br>'));
							}
						}
					</script>
					<button onclick="example2(this)">Show</button>
					<div id="content2"></div>
				</div>
				<div id="tabs-3">
					<script>
						var exampletable = null;
						function toggleAttachExampleTable(btn) {
							if ($(btn).find('span').html() == 'Attach') {
								exampletable = $('#testtable').datatable();
								$(btn).find('span').html('Detach');
							} else {
								exampletable.get(0).detach();
								$(btn).find('span').html('Attach');
							}
						}
					</script>
					<button onclick="toggleAttachExampleTable(this)">Attach</button>
					<div id="content3">
						<table id="testtable" title="A table created from markup. Detaching restores original markup.">
							<thead><tr><th>Column1</th><th>Column2</th><th>Column 3</th></thead>
							<tbody>
								<tr><td>Item 1.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 2.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 3.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 4.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 5.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 6.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 7.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 8.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 9.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 10.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
								<tr><td>Item 11.1</td><td>Item 2.2</td><td>Item 1.3</td></tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<span style="position:absolute; right:20px; top:20px" class="credentials ui-state-hover">Developed by Tcherno, Copyright 2011 Tcherno Inc.</span>
		
		<div id="features" class="dialog" title="Features">
			<div style="padding:10px">
				<ul style="font-size:10pt;">
					<li>Variable length pagination
					<li>On-the-fly filtering
					<li>Column sorting
					<li>Smart handling of column widths
					<li>Scrolling options for table viewport
					<li>Fully internationalisable
					<li>jQuery UI ThemeRoller support
					<li>State saving
					<li>Hidden columns
					<li>Dynamic creation of tables
					<li>Ajax auto loading of data
					<li>Custom DOM positioning
					<li>Single column filtering
					<li>Non-destructive DOM interaction
					<li>Sorting column(s) highlighting
					<li>Advanced data source options
					<li>Extensive plug-in support
					<li>Sorting, type detection, API functions, pagination and filtering
					<li>Fully themeable by CSS
					<li>Solid documentation
				</ul>
			</div>
		</div>
	</body>
</html>
